<template>
  <div class="user-profile">
    <div class="profile-header">
      <div class="avatar-section">
        <img :src="userInfo.avatar || defaultAvatar" alt="用户头像" class="avatar" />
        <button @click="showAvatarUpload = true" class="change-avatar-btn">更换头像</button>
      </div>
      <div class="user-info">
        <h2>{{ userInfo.nickname || '未设置昵称' }}</h2>
        <p class="user-id">ID: {{ userInfo.id }}</p>
        <div class="user-stats">
          <div class="stat-item">
            <span class="stat-number">{{ userWorks.length }}</span>
            <span class="stat-label">作品数量</span>
          </div>
          <div class="stat-item">
            <span class="stat-number">{{ userInfo.followers || 0 }}</span>
            <span class="stat-label">关注者</span>
          </div>
          <div class="stat-item">
            <span class="stat-number">{{ userInfo.following || 0 }}</span>
            <span class="stat-label">关注中</span>
          </div>
        </div>
      </div>
    </div>
    
    <div class="profile-tabs">
      <button 
        v-for="tab in tabs" 
        :key="tab.key"
        @click="activeTab = tab.key"
        :class="['tab-btn', { active: activeTab === tab.key }]"
      >
        {{ tab.label }}
      </button>
    </div>
    
    <div class="tab-content">
      <!-- 基本信息 -->
      <div v-if="activeTab === 'info'" class="info-section">
        <form @submit.prevent="updateProfile" class="profile-form">
          <div class="form-group">
            <label>昵称</label>
            <input v-model="editForm.nickname" type="text" placeholder="请输入昵称" />
          </div>
          <div class="form-group">
            <label>邮箱</label>
            <input v-model="editForm.email" type="email" placeholder="请输入邮箱" />
          </div>
          <div class="form-group">
            <label>手机号</label>
            <input v-model="editForm.phone" type="tel" placeholder="请输入手机号" />
          </div>
          <div class="form-group">
            <label>个人简介</label>
            <textarea v-model="editForm.bio" placeholder="介绍一下自己吧..." rows="4"></textarea>
          </div>
          <div class="form-group">
            <label>所在地区</label>
            <input v-model="editForm.location" type="text" placeholder="请输入所在地区" />
          </div>
          <button type="submit" class="save-btn" :disabled="updating">{{ updating ? '保存中...' : '保存修改' }}</button>
        </form>
      </div>
      
      <!-- 我的作品 -->
      <div v-else-if="activeTab === 'works'" class="works-section">
        <div class="works-header">
          <h3>我的作品</h3>
          <button @click="showUploadModal = true" class="upload-btn">上传作品</button>
        </div>
        <div v-if="userWorks.length === 0" class="empty-state">
          <p>还没有上传任何作品</p>
          <button @click="showUploadModal = true" class="upload-first-btn">上传第一个作品</button>
        </div>
        <div v-else class="works-grid">
          <div v-for="work in userWorks" :key="work.id" class="work-card">
            <img :src="work.thumbnail" :alt="work.title" class="work-thumbnail" />
            <div class="work-info">
              <h4>{{ work.title }}</h4>
              <p class="work-desc">{{ work.description }}</p>
              <div class="work-meta">
                <span class="work-date">{{ formatDate(work.createdAt) }}</span>
                <span class="work-views">{{ work.views }} 浏览</span>
              </div>
            </div>
            <div class="work-actions">
              <button @click="editWork(work)" class="edit-btn">编辑</button>
              <button @click="deleteWork(work.id)" class="delete-btn">删除</button>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 认证信息 -->
      <div v-else-if="activeTab === 'auth'" class="auth-section">
        <div class="auth-status">
          <div class="auth-item">
            <div class="auth-icon" :class="{ verified: userInfo.emailVerified }">
              <span>📧</span>
            </div>
            <div class="auth-info">
              <h4>邮箱认证</h4>
              <p>{{ userInfo.emailVerified ? '已认证' : '未认证' }}</p>
            </div>
            <button v-if="!userInfo.emailVerified" @click="verifyEmail" class="verify-btn">立即认证</button>
          </div>
          
          <div class="auth-item">
            <div class="auth-icon" :class="{ verified: userInfo.phoneVerified }">
              <span>📱</span>
            </div>
            <div class="auth-info">
              <h4>手机认证</h4>
              <p>{{ userInfo.phoneVerified ? '已认证' : '未认证' }}</p>
            </div>
            <button v-if="!userInfo.phoneVerified" @click="verifyPhone" class="verify-btn">立即认证</button>
          </div>
          
          <div class="auth-item">
            <div class="auth-icon" :class="{ verified: userInfo.realNameVerified }">
              <span>🆔</span>
            </div>
            <div class="auth-info">
              <h4>实名认证</h4>
              <p>{{ userInfo.realNameVerified ? '已认证' : '未认证' }}</p>
            </div>
            <button v-if="!userInfo.realNameVerified" @click="verifyRealName" class="verify-btn">立即认证</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useUserStore } from '../stores/user';
import { useRouter } from 'vue-router';

// 初始化store和router
const userStore = useUserStore();
const router = useRouter();

// 响应式数据
const activeTab = ref('info');
const updating = ref(false);
const showAvatarUpload = ref(false);
const showUploadModal = ref(false);
const isLoading = ref(false);
const isSaving = ref(false);
const isUploadingAvatar = ref(false);
const errorMessage = ref('');
const successMessage = ref('');
const avatarFile = ref(null);
const avatarPreview = ref('');
const showPasswordModal = ref(false);
const passwordForm = ref({
  currentPassword: '',
  newPassword: '',
  confirmPassword: ''
});

// 计算属性
const userInfo = computed(() => userStore.user || {});
const userWorks = computed(() => userStore.userWorks || []);
const isLoggedIn = computed(() => userStore.isLoggedIn);
const userStats = computed(() => ({
  worksCount: userWorks.value.length,
  likesCount: userWorks.value.reduce((sum, work) => sum + (work.likes || 0), 0),
  viewsCount: userWorks.value.reduce((sum, work) => sum + (work.views || 0), 0)
}));

// 常量定义
const defaultAvatar = '/img/thumb.jpg';

const tabs = [
  { key: 'info', label: '基本信息' },
  { key: 'works', label: '我的作品' },
  { key: 'auth', label: '认证信息' }
];

// 表单数据
const editForm = ref({
  nickname: '',
  email: '',
  phone: '',
  bio: '',
  location: ''
});

// 表单验证
const validateForm = () => {
  if (!editForm.value.nickname.trim()) {
    errorMessage.value = '昵称不能为空';
    return false;
  }
  
  if (editForm.value.nickname.trim().length < 2) {
    errorMessage.value = '昵称至少需要2个字符';
    return false;
  }

  if (!editForm.value.email.trim()) {
    errorMessage.value = '邮箱不能为空';
    return false;
  }
  
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!emailRegex.test(editForm.value.email.trim())) {
    errorMessage.value = '请输入有效的邮箱地址';
    return false;
  }

  return true;
};

// 密码表单验证
const validatePasswordForm = () => {
  if (!passwordForm.value.currentPassword) {
    errorMessage.value = '请输入当前密码';
    return false;
  }
  
  if (!passwordForm.value.newPassword) {
    errorMessage.value = '请输入新密码';
    return false;
  }
  
  if (passwordForm.value.newPassword.length < 6) {
    errorMessage.value = '新密码长度不能少于6位';
    return false;
  }
  
  if (passwordForm.value.newPassword !== passwordForm.value.confirmPassword) {
    errorMessage.value = '两次输入的新密码不一致';
    return false;
  }
  
  return true;
};

/**
 * 更新用户资料
 */
const updateProfile = async () => {
  if (!validateForm()) {
    return;
  }

  updating.value = true;
  errorMessage.value = '';
  successMessage.value = '';

  try {
    const success = await userStore.updateUserInfo({
      nickname: editForm.value.nickname.trim(),
      email: editForm.value.email.trim(),
      bio: editForm.value.bio.trim(),
      phone: editForm.value.phone.trim(),
      location: editForm.value.location.trim()
    });
    
    if (success) {
      successMessage.value = '个人信息更新成功！';
      setTimeout(() => {
        successMessage.value = '';
      }, 3000);
    }
  } catch (error) {
    console.error('更新个人信息失败:', error);
    if (error.response) {
      switch (error.response.status) {
        case 400:
          errorMessage.value = error.response.data?.message || '输入信息有误，请检查后重试';
          break;
        case 409:
          errorMessage.value = '邮箱已被其他用户使用';
          break;
        case 401:
          errorMessage.value = '登录已过期，请重新登录';
          setTimeout(() => {
            userStore.logout();
            router.push('/login');
          }, 2000);
          break;
        default:
          errorMessage.value = error.response.data?.message || '更新失败，请重试';
      }
    } else if (error.code === 'NETWORK_ERROR') {
      errorMessage.value = '网络连接失败，请检查网络设置';
    } else {
      errorMessage.value = '更新失败，请重试';
    }
  } finally {
    updating.value = false;
  }
};

// 头像上传
const handleAvatarChange = (event) => {
  const file = event.target.files[0];
  if (!file) return;
  
  // 验证文件类型
  if (!file.type.startsWith('image/')) {
    errorMessage.value = '请选择图片文件';
    return;
  }
  
  // 验证文件大小（5MB）
  if (file.size > 5 * 1024 * 1024) {
    errorMessage.value = '图片大小不能超过5MB';
    return;
  }
  
  avatarFile.value = file;
  
  // 预览图片
  const reader = new FileReader();
  reader.onload = (e) => {
    avatarPreview.value = e.target.result;
  };
  reader.readAsDataURL(file);
};

const uploadAvatar = async () => {
  if (!avatarFile.value) {
    errorMessage.value = '请先选择头像图片';
    return;
  }
  
  isUploadingAvatar.value = true;
  errorMessage.value = '';
  
  try {
    const success = await userStore.uploadAvatar(avatarFile.value);
    if (success) {
      successMessage.value = '头像更新成功！';
      avatarFile.value = null;
      avatarPreview.value = '';
      showAvatarUpload.value = false;
      setTimeout(() => {
        successMessage.value = '';
      }, 3000);
    }
  } catch (error) {
    console.error('头像上传失败:', error);
    if (error.response) {
      switch (error.response.status) {
        case 413:
          errorMessage.value = '图片文件过大';
          break;
        case 415:
          errorMessage.value = '不支持的图片格式';
          break;
        default:
          errorMessage.value = error.response.data?.message || '头像上传失败，请重试';
      }
    } else {
      errorMessage.value = '头像上传失败，请重试';
    }
  } finally {
    isUploadingAvatar.value = false;
  }
};

// 修改密码
const openPasswordModal = () => {
  showPasswordModal.value = true;
  passwordForm.value = {
    currentPassword: '',
    newPassword: '',
    confirmPassword: ''
  };
  errorMessage.value = '';
};

const closePasswordModal = () => {
  showPasswordModal.value = false;
  passwordForm.value = {
    currentPassword: '',
    newPassword: '',
    confirmPassword: ''
  };
  errorMessage.value = '';
};

const changePassword = async () => {
  if (!validatePasswordForm()) {
    return;
  }
  
  isSaving.value = true;
  errorMessage.value = '';
  
  try {
    const success = await userStore.changePassword({
      currentPassword: passwordForm.value.currentPassword,
      newPassword: passwordForm.value.newPassword
    });
    
    if (success) {
      successMessage.value = '密码修改成功！';
      closePasswordModal();
      setTimeout(() => {
        successMessage.value = '';
      }, 3000);
    }
  } catch (error) {
    console.error('修改密码失败:', error);
    if (error.response) {
      switch (error.response.status) {
        case 400:
          errorMessage.value = '当前密码错误';
          break;
        case 401:
          errorMessage.value = '登录已过期，请重新登录';
          setTimeout(() => {
            userStore.logout();
            router.push('/login');
          }, 2000);
          break;
        default:
          errorMessage.value = error.response.data?.message || '密码修改失败，请重试';
      }
    } else {
      errorMessage.value = '密码修改失败，请重试';
    }
  } finally {
    isSaving.value = false;
  }
};

/**
 * 邮箱认证
 */
const verifyEmail = async () => {
  try {
    const success = await userStore.sendEmailVerification();
    if (success) {
      successMessage.value = '验证邮件已发送，请查收邮箱';
      setTimeout(() => {
        successMessage.value = '';
      }, 3000);
    }
  } catch (error) {
    console.error('发送验证邮件失败:', error);
    errorMessage.value = '发送验证邮件失败，请重试';
  }
};

/**
 * 手机认证
 */
const verifyPhone = async () => {
  try {
    const success = await userStore.sendPhoneVerification();
    if (success) {
      successMessage.value = '验证短信已发送，请查收';
      setTimeout(() => {
        successMessage.value = '';
      }, 3000);
    }
  } catch (error) {
    console.error('发送验证短信失败:', error);
    errorMessage.value = '发送验证短信失败，请重试';
  }
};

/**
 * 实名认证
 */
const verifyRealName = () => {
  router.push('/profile/real-name-verification');
};

/**
 * 编辑作品
 */
const editWork = (work) => {
  router.push(`/works/edit/${work.id}`);
};

/**
 * 删除作品
 */
const deleteWork = async (workId) => {
  if (confirm('确定要删除这个作品吗？此操作不可恢复！')) {
    try {
      const success = await userStore.deleteWork(workId);
      if (success) {
        successMessage.value = '作品删除成功';
        setTimeout(() => {
          successMessage.value = '';
        }, 3000);
      }
    } catch (error) {
      console.error('删除作品失败:', error);
      errorMessage.value = '删除作品失败，请重试';
    }
  }
};

const refreshUserData = async () => {
  isLoading.value = true;
  try {
    await userStore.fetchUserInfo();
    await userStore.fetchUserWorks();
  } catch (error) {
    console.error('刷新用户数据失败:', error);
    errorMessage.value = '获取用户数据失败，请刷新页面重试';
  } finally {
    isLoading.value = false;
  }
};

/**
 * 格式化日期
 */
const formatDate = (dateString) => {
  return new Date(dateString).toLocaleDateString('zh-CN');
};

// 组件挂载时检查登录状态并获取用户数据
onMounted(async () => {
  if (!isLoggedIn.value) {
    router.push('/login');
    return;
  }
  
  // 获取用户最新信息和作品
  await refreshUserData();
  
  // 初始化表单数据
  if (userInfo.value) {
    editForm.value = {
      nickname: userInfo.value.nickname || '',
      email: userInfo.value.email || '',
      phone: userInfo.value.phone || '',
      bio: userInfo.value.bio || '',
      location: userInfo.value.location || ''
    };
  }
});
</script>

<style scoped>
.user-profile {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  min-height: 100vh;
}

.profile-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
  padding: 30px 20px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}

@media (min-width: 768px) {
  .profile-header {
    flex-direction: row;
    text-align: left;
    gap: 30px;
    padding: 30px;
  }
}

.avatar-section {
  text-align: center;
  flex-shrink: 0;
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255, 255, 255, 0.2);
  margin-bottom: 15px;
  transition: all 0.3s ease;
}

@media (min-width: 768px) {
  .avatar {
    width: 100px;
    height: 100px;
  }
}

.change-avatar-btn {
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  color: white;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.change-avatar-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.user-info {
  flex: 1;
  min-width: 0;
}

.user-info h2 {
  margin-bottom: 8px;
  font-size: 20px;
  color: white;
  word-break: break-word;
}

@media (min-width: 768px) {
  .user-info h2 {
    font-size: 24px;
    margin-bottom: 10px;
  }
}

.user-id {
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 15px;
  font-size: 14px;
}

@media (min-width: 768px) {
  .user-id {
    margin-bottom: 20px;
  }
}

.user-stats {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

@media (min-width: 768px) {
  .user-stats {
    justify-content: flex-start;
    gap: 30px;
  }
}

.stat-item {
  text-align: center;
  min-width: 60px;
}

.stat-number {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: #00d4ff;
  margin-bottom: 4px;
}

@media (min-width: 768px) {
  .stat-number {
    font-size: 20px;
    margin-bottom: 5px;
  }
}

.stat-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
}

@media (min-width: 768px) {
  .stat-label {
    font-size: 12px;
  }
}

.profile-tabs {
  display: flex;
  gap: 5px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.profile-tabs::-webkit-scrollbar {
  display: none;
}

@media (min-width: 768px) {
  .profile-tabs {
    gap: 10px;
    margin-bottom: 30px;
    overflow-x: visible;
  }
}

.tab-btn {
  padding: 10px 16px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.3s ease;
  white-space: nowrap;
  font-size: 14px;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .tab-btn {
    padding: 12px 24px;
    font-size: 16px;
  }
}

.tab-btn.active {
  color: #00d4ff;
  border-bottom-color: #00d4ff;
}

.tab-btn:hover {
  color: rgba(255, 255, 255, 0.8);
}

.tab-btn.active:hover {
  color: #00d4ff;
}

.tab-content {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 20px;
}

@media (min-width: 768px) {
  .tab-content {
    padding: 30px;
  }
}

.profile-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 768px) {
  .profile-form {
    gap: 20px;
  }
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

@media (min-width: 768px) {
  .form-group {
    gap: 8px;
  }
}

.form-group label {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
  font-size: 14px;
}

@media (min-width: 768px) {
  .form-group label {
    font-size: 16px;
  }
}

.form-group input,
.form-group textarea {
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 14px;
  transition: all 0.3s ease;
  width: 100%;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .form-group input,
  .form-group textarea {
    font-size: 16px;
  }
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #00d4ff;
  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.save-btn {
  padding: 12px 24px;
  background: linear-gradient(45deg, #00d4ff, #ff6b6b);
  border: none;
  border-radius: 8px;
  color: white;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  align-self: stretch;
  font-size: 14px;
}

@media (min-width: 768px) {
  .save-btn {
    align-self: flex-start;
    font-size: 16px;
  }
}

.save-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 212, 255, 0.3);
}

.save-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.works-header {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 20px;
}

@media (min-width: 768px) {
  .works-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 0;
  }
}

.works-header h3 {
  color: white;
  margin: 0;
  font-size: 18px;
}

@media (min-width: 768px) {
  .works-header h3 {
    font-size: 20px;
  }
}

.upload-btn,
.upload-first-btn {
  padding: 10px 20px;
  background: linear-gradient(45deg, #00d4ff, #ff6b6b);
  border: none;
  border-radius: 8px;
  color: white;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
  width: 100%;
}

@media (min-width: 768px) {
  .upload-btn,
  .upload-first-btn {
    width: auto;
    font-size: 16px;
  }
}

.upload-btn:hover,
.upload-first-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 212, 255, 0.3);
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: rgba(255, 255, 255, 0.6);
}

@media (min-width: 768px) {
  .empty-state {
    padding: 60px 20px;
  }
}

.works-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 15px;
}

@media (min-width: 480px) {
  .works-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
}

@media (min-width: 768px) {
  .works-grid {
    gap: 20px;
  }
}

.work-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.work-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

@media (min-width: 768px) {
  .work-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  }
}

.work-thumbnail {
  width: 100%;
  height: 140px;
  object-fit: cover;
}

@media (min-width: 768px) {
  .work-thumbnail {
    height: 150px;
  }
}

.work-info {
  padding: 12px;
}

@media (min-width: 768px) {
  .work-info {
    padding: 15px;
  }
}

.work-info h4 {
  color: white;
  margin-bottom: 6px;
  font-size: 15px;
  line-height: 1.3;
  word-break: break-word;
}

@media (min-width: 768px) {
  .work-info h4 {
    margin-bottom: 8px;
    font-size: 16px;
  }
}

.work-desc {
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  margin-bottom: 8px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (min-width: 768px) {
  .work-desc {
    font-size: 14px;
    margin-bottom: 10px;
  }
}

.work-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  flex-wrap: wrap;
  gap: 5px;
}

@media (min-width: 768px) {
  .work-meta {
    font-size: 12px;
  }
}

.work-actions {
  padding: 12px;
  display: flex;
  gap: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

@media (min-width: 768px) {
  .work-actions {
    padding: 15px;
    gap: 10px;
  }
}

.edit-btn,
.delete-btn {
  flex: 1;
  padding: 8px;
  border: none;
  border-radius: 6px;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
}

@media (min-width: 768px) {
  .edit-btn,
  .delete-btn {
    font-size: 12px;
  }
}

.edit-btn {
  background: rgba(59, 130, 246, 0.2);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.edit-btn:hover {
  background: rgba(59, 130, 246, 0.3);
  transform: translateY(-1px);
}

.delete-btn {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.delete-btn:hover {
  background: rgba(239, 68, 68, 0.3);
  transform: translateY(-1px);
}

.auth-status {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

@media (min-width: 768px) {
  .auth-status {
    gap: 20px;
  }
}

.auth-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

@media (min-width: 768px) {
  .auth-item {
    gap: 20px;
    padding: 20px;
  }
}

.auth-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.auth-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .auth-icon {
    width: 50px;
    height: 50px;
    font-size: 20px;
  }
}

.auth-icon.verified {
  background: rgba(34, 197, 94, 0.2);
  border-color: #22c55e;
}

.auth-info {
  flex: 1;
  min-width: 0;
}

.auth-info h4 {
  color: white;
  margin-bottom: 4px;
  font-size: 15px;
  word-break: break-word;
}

@media (min-width: 768px) {
  .auth-info h4 {
    margin-bottom: 5px;
    font-size: 16px;
  }
}

.auth-info p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
}

@media (min-width: 768px) {
  .auth-info p {
    font-size: 14px;
  }
}

.verify-btn {
  padding: 8px 16px;
  background: linear-gradient(45deg, #00d4ff, #ff6b6b);
  border: none;
  border-radius: 6px;
  color: white;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .verify-btn {
    font-size: 12px;
  }
}

.verify-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 212, 255, 0.3);
}

/* 全局移动端优化 */
@media (max-width: 767px) {
  .user-profile {
    padding: 15px;
  }
  
  .profile-header {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }
  
  .user-stats {
    justify-content: center;
  }
  
  /* 优化小屏幕下的滚动体验 */
  .profile-tabs {
    overflow-x: auto;
    padding-bottom: 5px;
  }
  
  .works-grid {
    grid-template-columns: 1fr;
  }
  
  .auth-item {
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }
  
  /* 确保按钮在小屏幕下有足够的点击区域 */
  .tab-btn {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .save-btn,
  .upload-btn,
  .upload-first-btn,
  .verify-btn {
    min-height: 44px;
  }
  
  /* 优化表单输入框在移动端的体验 */
  .form-group input,
  .form-group textarea {
    min-height: 44px;
    -webkit-appearance: none;
    border-radius: 8px;
  }
  
  /* 防止在iOS设备上的缩放 */
  .form-group input[type="text"],
  .form-group input[type="email"],
  .form-group input[type="tel"],
  .form-group textarea {
    font-size: 16px;
  }
}
</style>